<template>
  <div class="shopsBox">
    <!-- 头部tab切换 -->
    <van-icon name="arrow-left" class="van_left" @click="vanLeft" />
    <van-tabs v-model="activeName">
      <van-tab title="商品" name="a" class="shop">
        <div class="head">
          <van-swipe :autoplay="3000" height="150px" indicator-color="white">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="center" v-for="item in tabledata" :key="item.id">
          <div class="center_one">
            <div class="left">
              <i>限购价￥{{ item.price }}</i>
              <!-- <p style="text-decoration: line-through; margin-top: 6px">
                原价￥{{item.yuanjia}}
              </p> -->
              <p>已售出{{ item.discount }}万件</p>
            </div>
            <div class="right">
              <div class="time" v-for="(item, index) in list" :key="index">
                <van-count-down :time="item.time">
                  <template #default="timeData">
                    <span class="colon">倒计时:</span>
                    <span class="block">{{ timeData.days }}</span>
                    <span class="colon">天:</span>
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
            </div>
          </div>
          <div class="center_two">
            <div class="div_item">
              <div class="center_two_left">
                <p style="font-size: 16px">{{ item.name }}</p>
                <p style="color: #ff0000; margin-top: 5px">
                  {{ item.pinjia }}
                </p>
              </div>
              <div class="center_two_right">
                <van-icon name="guide-o" color="#ff0000" size="20" />
                <p style="color: #ff0000; font-size: 12px">分享</p>
              </div>
            </div>
            <div class="center_two_bottom">
              <p>[会员特权] 单笔实付满68员包邮(少数偏远地区除外)</p>
            </div>
          </div>
        </div>
        <div class="discuss">
          <p>评论(0)</p>
          <button @click="pinlun">查看全部评论</button>
        </div>
        <div style="background: #f5f5f5; height: 20px"></div>
      </van-tab>
      <van-tab title="详情" name="b" class="content">
        <div v-for="(item, index) in images" :key="index" class="van-div_image">
          <img :src="item" alt="" />
        </div>
      </van-tab>
      <van-tab title="评论" name="c" class="comment">
        <span>用户评论</span>
        <van-rate v-model="value" readonly size="12px" />
        <span style="color: red; font-size: 12px; margin: 0">100%好评</span>
        <div>
          <span class="picture" style="color: red; border: red 1px solid"
            >有图({{ num1 }})</span
          >
          <span class="picture">有图({{ num2 }})</span>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 底部加入购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon
        v-show="flag == true"
        icon="star-o"
        @click="flag = false"
        text="收藏"
        color="#block"
      />
      <van-goods-action-icon
        v-show="flag == false"
        icon="star-o"
        @click="flag = true"
        text="收藏"
        color="#ff5000"
      />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gouwuche" />
      <van-goods-action-button
        type="danger"
        text="加入购物车"
        @click="ShoppingCart(Id)"
      />
    </van-goods-action>
  </div>
</template>
<script>
import {putnum,cartLists, addcart, addGoodMore } from "../../api/index";
export default {
  data() {
    return {
      activeName: "",
      flag: true,
      value: 5,
      num1: 0,
      num2: 0,
      Id: 0,
      quantity:1,
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2Fv2-b3e114573c293ccdd4281ff5b9c85d67_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642647957&t=ec195e761630b4ad63152f7c083117f2",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp247398887.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642647957&t=8dfcb3f272f4f8f8650cfb4e6438a577",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F4190545905%2FO1CN01VAZKKU1tUXNdRfP19_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642647957&t=b391464dfda93902f6f49e98ae3e7efc",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp146030816.jpg&refer=http%3A%2F%2Fimg3.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642648204&t=e9b2fcbd26fb045771ef3a103cbdeec5",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0706%252F0f1309ecj00qvt9ov003ed200m800m8g007e007e.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642648204&t=c63b7bd21406b7b947995784b796f953",
      ],
      list: [
        {
          // 倒计时
          time: "300000000",
        },
      ],
      tabledata: [
        {
          id: 1,
          xiaogoujia: 31.5,
          yuanjia: 52.1,
          chushou: 15.5,
          name: "Tom大肥猫 5kg*1只",
          pinjia: "肉香四溢 香辣更过瘾",
        },
      ],
    };
  },
  created() {
    this.Id = Number(window.localStorage.getItem("id"));
    this.getdata();
  },
  methods: {
    // 数据请求
    async getdata() {
      let obj = {
        id:this.Id,
      };
      let {
        data: { result },
        meta: { msg, status },
      } = await addGoodMore(obj);
      if (status == 200) {
        this.tabledata = [result];
        this.images = JSON.parse(result.detailsImg);
        // console.log(JSON.parse(result.detailsImg));
      }
    },
    // 
    vanLeft() {
      this.$router.push({ path: "/home" }).catch((error) => error);
    },
    // 导航栏切换
    pinlun() {
      this.activeName = "c";
    },
    // 购物车跳转
    gouwuche() {
      let goodsId = this.Id;
      console.log(goodsId);
      this.$router
        .push({ path: "/gouwuche", query: { goodsId } })
        .catch((error) => error);
    },
    // 加入购物车
    async ShoppingCart(id) {
      let obj = {
        userId: window.localStorage.getItem("userId"),
        goodsId:id,
        goodsNum:this.quantity,
      };
      // console.log(obj);
      // let {data:{result},meta:{status}} = await putnum(obj)
      // if(status == 200){
      //   this.quantity = result[0];
      //   console.log(this.quantity);
      // }
      // 如果重复点击按钮则添加数量
          let {
        data,
        meta: { status, msg },
      } = await addcart(obj);
      if (status == 200) {
        this.$notify({ type: "seccuss", message: msg });
      } else {
        this.$notify({ type: "warning", message: msg });
      } 
    },
  },
};
</script>
<style lang="less" scoped>
.shopsBox {
  width: 100%;
  background-color: #f5f5f5;
  .van_left {
    position: absolute;
    left: 0;
    z-index: 1;
    top: 13px;
    font-size: 20px;
  }
  .shop {
    .head {
      width: 100%;
      height: 280px;
      img {
        width: 100%;
        height: 280px;
      }
    }
    .center {
      .center_one {
        width: 100%;
        height: 65px;
        background: linear-gradient(to right, #ff0000, orange);
        color: #fff;
        display: flex;

        .left {
          width: 200px;
          font-size: 12px;

          margin-left: 20px;
          i {
            font-size: 14px;
          }
          p {
            margin: 0;
            margin-top: 3px;
          }
        }
        .right {
          flex: 1;
          .time {
            height: 65px;
            //   line-height: 65px;
            .van-count-down {
              color: #f5f5f5;
              line-height: 65px;
              text-align: center;
            }
          }
        }
      }

      .center_two {
        //   display: flex;
        background-color: #fff;
        font-size: 14px;
        p {
          margin: 0;
        }
        .div_item {
          display: flex;
          padding-left: 18px;
          position: relative;

          .center_two_right {
            position: absolute;
            top: 5px;
            right: 15px;
          }
        }
        .center_two_bottom {
          margin-top: 10px;
          margin-left: 18px;
        }
      }
    }
    .discuss {
      height: 100px;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      p {
        color: #999;
        margin-left: 10px;
        text-align: left;
        padding-top: 10px;
      }
      button {
        background-color: #fff;
        padding: 0;
        margin: 0;
        margin-top: 35px;
        width: 100px;
        border: 1px solid #ff0000;
        color: #ff0000;
      }
    }
  }
  .content {
    width: 100%;
    .van-div_image {
      height: 290px;

      img {
        width: 100%;
        height: 290px;
      }
    }
  }
  .comment {
    span {
      font-size: 14px;
      margin: 0 16px;
    }
    .picture {
      display: inline-block;
      text-align: center;
      width: 70px;
      font-size: 12px;
      border: 1px solid #999;
      border-radius: 5px;
      margin: 5px 16px;
    }
  }
}
</style>